.vchat-Detail{
    width:100%;
    height: 100%;
    position: relative;
    background-color: #f5f5f5;
    overflow-y: auto;
    .vchat-Detail-header{
        position: absolute;
        left:0;
        top:0;
        z-index: 3;
    }
    .DetailImage-bg{
        width:100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        left:0;
        top:0;
        z-index: 2;
        padding: 50px 15px 0;
        box-sizing: border-box;
        p{
            color: #fff;
            font-size: 12px;
            text-align: left;
            margin-bottom: 5px;
        }
        p.title{
            font-size: 18px;
        }
    }
    .Qr-dialog{
        width:100%;
        height: 0;
        overflow: hidden;
        background-color: rgba(0,0,0,0.6);
        position: absolute;
        left:0;
        top:0;
        z-index: 5;
        transition: height 0.5s cubic-bezier(0,.97,0,.98);
        .QrClose{
            position: absolute;
            right: 30px;
            top: 30px;
        }
    }
    .Qr-dialog.active{
        height: 100%;
    }
    .vchat-Detail-container{
        width:100%;
        position: relative;
        .detail-item{
            display: flex;
            height: 38px;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            padding: 8px 10px 8px 15px;
            box-sizing: border-box;
            background-color: #fff;
            font-size: 14px;
            i{
                margin: 0;
            }
            .many{
                color: #6D6D6D;
                font-size: 12px;
                display: flex;
                align-items: center;
                span{
                    margin-right: 2px;
                }
            }
        }
        .detail-item:hover{
            opacity: 0.8;
        }
        .firend-info{
            padding: 20px 10px 8px 15px;
            box-sizing: border-box;
            background-color: #fff;
            font-size: 13px;
            text-align: left;
            margin-bottom: 5px;
        }
        .group-users{
            width:100%;
            background-color: #fff;
            color: #323232;
            box-sizing: border-box;
            margin-bottom: 5px;
            .group-users-title{
                border-bottom: 1px solid #f5f5f5;
                margin-bottom: 10px;
                >span{
                    font-size: 14px;
                }
            }
            .group-users-liitte-list{
                width:100%;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                li{
                    width:64px;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 10px;
                    span{
                        max-width: 64px;
                        font-size: 12px;
                        color: #6D6D6D;
                    }
                }
            }
        }
        .group-card{
            margin-bottom: 5px;
        }
        .group-tag{
            margin-bottom: 5px;
            >span{
                font-size: 14px;
                color: #323232;
            }
            >p{
                display: flex;
                justify-content: flex-start;
            }
        }
        .group-managers{
            justify-content: space-between;
            >div{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                a{
                    width:28px;
                    height: 28px;
                    margin-right: 5px;
                }
                span{
                    font-size: 14px;
                    color: #323232;
                    margin-right: 15px;
                }
            }
        }
        .detail-button{
            padding: 0 15px;
            box-sizing: border-box;
        }
        //
        .detail-avatar{
            display: block;
            position: absolute;
            left:50%;
            transform: translateX(-50%);
            top:-60px;
            width:80px;
            height: 80px;
            overflow: hidden;
            border-radius: 50%;
            border: 2px solid #f5f5f5;
            z-index: 5;
            img{
                width:80px;
            }
        }
    }
}
.vchat-apply{
    width:100%;
    height: 100%;
    background-color: #f7f7f7;
    text-align: left;
    .introduceForm{
        .el-form-item{
            margin-bottom: 0;
        }
        .el-form-item__label{
            font-size: 12px;
            color: #d5d5d5;
        }
    }
    span{
        font-size: 13px;
        color: #b7b7b7;
        padding-left: 15px;
        cursor: pointer;
    }
    i{
        display: block;
        padding-right: 10px;
        box-sizing: border-box;
        font-style: normal;
        color: #6c6c6c;
        text-align: right;
    }
}